<template>
	<view id="mine-details-one">
		<view class="head">
			<image :src="info.activityDetailImg" mode="aspectFill"></image>
		</view>
		<view class="main">
			<view class="main_detail">
				<view class="main_detail_price">
					<text class="main_detail_price_one">￥</text>
					<text class="main_detail_price_two">{{info.sellPrice}}</text>
					<text class="main_detail_price_three">¥{{info.originalPrice}}</text>
				</view>
				<view class="title_box ellipseHide_two">
					<text class="type_box">平台券码</text>
					<text>{{info.couponName}}</text>
				</view>
			</view>
			<view class="expected_reward" v-if="info.awardType!=3">
				预计获得{{info.awardAmount}}<text v-if="info.awardType==2">通分</text><text
					v-if="info.awardType==1">神椰CoCo</text>奖励
			</view>
			<view class="main_shop">
				<view class="main_shop_top">
					<view class="main_shop_top_l ellipseHide">
						<view class="shop_title">适用门店</view>
						<view class="shop_name ellipseHide">
							<text>{{info.name}}</text>
						</view>
					</view>
					<view class="main_shop_top_r" @click="jumpMoreShop">
						<text>更多({{info.shopCount}})</text>
						<image class="right_icon" src="@/static/sy/mine-detailsmine-details/right_icon.png" mode="">
						</image>
					</view>
				</view>
				<view class="main_shop_bottom">
					<view class="distance" v-if="info.distance!=''">{{info.distance}}km</view>
					<view class="address ellipseHide_two">{{info.address}}</view>
				</view>
			</view>
			<view class="main_time">
				<text class="main_time_l">使用时间</text>
				<text v-if="info.couponValidityType==1">
					无限制
				</text>
				<text v-if="info.couponValidityType==2">购买之日起{{info.validityDay}}天内有效</text>
			</view>
			<view class="main_rule">
				<view class="main_rule_title">使用规则</view>
				<view class="main_rule_content">{{info.useDetail}}</view>
			</view>
		</view>
		<view class="operation" v-if="id==''">
			<view class="operation_button" @click="wxPay" v-if="info.status!=4">立即购买</view>
			<!-- <button class="operation_button" @click="wxPay" v-if="info.status!=4" :disabled="disabled">立即购买</button> -->
			<view class="operation_button sell_out" v-if="info.status==4">已售罄</view>
		</view>
		<view class="operation operation_two" v-if="id!=''">
			<view class="operation_button operation_button_one" @click="refundClick">退款</view>
			<view class="operation_button operation_button_two" @click="useClick">立即使用</view>
		</view>
		<view class="zw"></view>
		<!-- 退款提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog" mask-background-color="rgba(0, 0, 0, 0.6)">
			<uni-popup-dialog type="info" cancelText="取消" confirmText="确认退款" title="" content="退款后购买商品的金额将原路退回是否确认退款？"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<!-- 立即使用弹窗 -->
		<view class="prop_box" @touchmove.stop.prevent v-if="isShow" @click="isShow=false">
			<view class="prop_box_content" :class="isShow?'prop_box_content_active':''">
				<view class="prop_box_content_title">使用时出示给商家核销</view>
				<image class="prop_box_content_img"
					:src="useInfo.qrCode"
					mode=""></image>
				<view class="prop_box_content_num">{{useInfo.couponNo}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		activityPlatformDetail,
		punchActivityBuy,
		couponPlatformDetail,
		couponRefund,
		couponUse
	} from '@/api/sy.js'
	import wechat from '@/components/jweixin-module/wechat'
	export default {
		data() {
			return {
				disabled: false,
				isShow: false, //是否显示核销弹窗
				info: {}, //详情信息
				data: {}, //请求参数
				payData: {
					couponId: '', //优惠券id
					account: '', //充值帐号
					shopId:'',//店铺Id
				},
				lat: '',
				lnt: '',
				latLntdata: {},
				id: '', //优惠券id
				useInfo:{},//核销码
			}
		},
		onLoad(option) {
			if (option.type == '1') {
				this.latLntdata = JSON.parse(option.latLntdata)
				this.lat = this.latLntdata.lat
				this.lnt = this.latLntdata.lnt
				this.id = option.id
				this.getCouponPlatformDetail()
			} else {
				this.dataInfo = JSON.parse(option.info)
				this.lat = this.dataInfo.lat
				this.lnt = this.dataInfo.lnt
				this.payData.shopId = this.dataInfo.shopId
				this.getInfo()
			}
		},
		methods: {
			async getInfo() { //获取详情内容
				uni.showLoading({
					title: '加载中'
				})
				try {
					var res = await activityPlatformDetail(this.dataInfo)
					this.info = res.result
					this.payData.couponId = res.result.couponId
					console.log('this.payData.couponId',this.payData.couponId)
					uni.hideLoading()
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}
			},
			async getCouponPlatformDetail() { //
				uni.showLoading({
					title: '加载中'
				})
				let data = {
					...this.latLntdata,
					id: this.id
				}
				try {
					var res = await couponPlatformDetail(data)
					this.info = res.result
					this.payData.couponId = res.result.couponId
					uni.hideLoading()
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}
			},
			refundClick() { //点击退款
				this.$refs.alertDialog.open()
			},
			async dialogConfirm() { //确认退款
				uni.showLoading({
					title: '退款中',
					mask: true
				})
				try {
					var res = await couponRefund(this.id)
					uni.hideLoading()
					uni.showToast({
						title: '退款成功',
						icon: 'none'
					})
					this.dialogClose()
					// var url = this.domainName +'/pages/sy/sy'
					// window.location.href = this.domainName +'/pages/sy/sy'
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/sy/sy'
						})
					},1000)
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}
			},
			dialogClose() { //取消退款弹窗
				this.$refs.alertDialog.close()
			},
			async useClick() { //立即使用couponUse
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				try {
					var res = await couponUse(this.id)
					this.useInfo = res.result
					uni.hideLoading()
					this.isShow = true
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}
				
			},
			jumpMoreShop() { //更多适用门店
				uni.navigateTo({
					url: '/pages/sy/mine-details/applicable-stores?lat=' + this.lat + '&lnt=' + this.lnt +
						'&couponId=' + this.info.couponId
				})
			},
			//微信支付
			async wxPay() {
				var _this = this
				uni.showLoading({
					title: '请求中',
					mask: true
				})
				this.disabled = true
				if (wechat.isWechat()) {
					let data = {
						...this.payData
					}
					var res = await punchActivityBuy(data)
					let orderId = res.result.orderId
					try {
						uni.hideLoading()
						// _this.payStatus = true
						wechat.wexinPay(res.result, function(callback) {
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/sy/mine-details/pay_success?orderId=' +
										orderId + '&type=' + '1' + '&lat=' + _this.lat + '&lnt=' + _this.lnt
								})
							}, 1000)
						}, async function(errorCallback) {
							_this.disabled = false
							uni.showToast({
								title: '取消支付成功',
								icon: 'none'
							})
						})
					} catch {
						_this.disabled = false
						uni.hideLoading()
					} finally {
						_this.disabled = false
						setTimeout(() => {
							uni.hideLoading()
						}, 2000)
					}
				} else {
					uni.hideLoading()
					uni.showToast({
						title: '请在微信客户端中使用',
						icon: 'none'
					})
				}
			},
		}
	}
</script>

<style>
	page {
		background-color: #F5F7F9;
	}

	view {
		box-sizing: border-box;
	}

	.head {
		width: 100%;
		height: 520rpx;
	}

	.head image {
		width: 100%;
		height: 100%;
	}

	.main {
		margin: -96rpx 30rpx 0;
		position: relative;
	}

	.main_detail {
		width: 100%;
		padding: 28rpx 32rpx 40rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
	}

	.main_detail_price {
		color: #FF3A3A;
	}

	.main_detail_price_one {
		font-size: 44rpx;
	}

	.main_detail_price_two {
		font-size: 68rpx;
		font-weight: bold;
		margin-right: 14rpx;
	}

	.main_detail_price_three {
		font-size: 28rpx;
		color: #999999;
		text-decoration-line: line-through;
	}

	.title_box {
		font-size: 30rpx;
		font-weight: bold;
		color: #222222;
		line-height: 48rpx;
	}

	.type_box {
		border: 2rpx solid #FF1616;
		border-radius: 100rpx;
		color: #FF1616;
		padding: 0rpx 14rpx;
		font-size: 24rpx;
		margin-right: 18rpx;
	}

	.expected_reward {
		width: 100%;
		height: 72rpx;
		border-radius: 8rpx;
		background-color: #FFEFEF;
		color: #FF1616;
		font-size: 30rpx;
		text-align: center;
		line-height: 72rpx;
		margin: 0rpx 0 24rpx;
	}

	.main_shop {
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
	}

	.main_shop_top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.main_shop_top_l {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #222222;
	}

	.shop_title {
		background: #F0F0F0;
		border-radius: 4rpx;
		padding: 0 8rpx;
		margin-right: 18rpx;
		font-size: 24rpx;
	}

	.shop_name {
		width: 330rpx;
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
	}

	.main_shop_top_r {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #333333;
	}

	.right_icon {
		width: 18rpx;
		height: 18rpx;
		margin: 4rpx 0 0 2rpx;
	}

	.main_shop_bottom {
		margin-top: 16rpx;
		width: 100%;
		height: 120rpx;
		background: url('/static/sy/mine-detailsmine-details/map_bj.png') no-repeat;
		background-size: 100% 100%;
		display: flex;
		padding: 20rpx 40rpx 20rpx 0;
	}

	.distance {
		height: 36rpx;
		border-radius: 4rpx;
		border: 2rpx solid #2720DE;
		color: #2720DE;
		font-size: 22rpx;
		padding: 0 10rpx;
		margin-right: 16rpx;
		margin-top: 4rpx;
		line-height: 32rpx;
	}

	.address {
		font-size: 28rpx;
		color: #333333;
	}

	.main_time {
		width: 100%;
		border-radius: 20rpx;
		background: #FFFFFF;
		display: flex;
		font-size: 30rpx;
		color: #333333;
		padding: 30rpx;
		margin: 24rpx 0;
	}

	.main_time_l {
		font-size: 30rpx;
		color: #222222;
		margin-right: 28rpx;
	}

	.main_rule {
		width: 100%;
		border-radius: 20rpx;
		background: #FFFFFF;
		padding: 30rpx 30rpx 40rpx;
	}

	.main_rule_title {
		font-size: 30rpx;
		color: #222222;
		margin-bottom: 20rpx;
	}

	.main_rule_content {
		font-size: 30rpx;
		color: #555555;
		line-height: 50rpx;
		word-break: break-all;
	}

	.zw {
		height: 220rpx;
		width: 100%;
	}

	.operation {
		background-color: #FFFFFF;
		width: 100%;
		padding: 30rpx 30rpx 44rpx;
		position: fixed;
		bottom: 0;
		z-index: 2;
		border-top: 2rpx solid #E2E2E2;
	}

	.operation_button {
		width: 100%;
		height: 88rpx;
		border-radius: 12rpx;
		background: linear-gradient(90deg, #2720DE 0%, #6F00FC 98.24%);
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}

	.sell_out {
		background: #BABABA;
	}

	.operation_button:active {
		opacity: 0.8;
	}

	.operation_two {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.operation_button_one {
		width: 196rpx;
		height: 88rpx;
		text-align: center;
		line-height: 84rpx;
		border: 2rpx solid #C0C0C0;
		font-size: 36rpx;
		color: #222222;
		background: #FFFFFF !important;
	}

	.operation_button_two {
		width: 454rpx;
	}

	.prop_box {
		background-color: rgba(0, 0, 0, 0.6);
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 9;
		top: 0;
	}

	.prop_box_content {
		background-color: #FFFFFF;
		width: 100%;
		height: 872rpx;
		border-radius: 32rpx 32rpx 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		bottom: 0;
		z-index: 10;
	}

	.prop_box_content_title {
		font-size: 28rpx;
		color: #666666;
		margin-top: 68rpx;
	}

	.prop_box_content_img {
		width: 366rpx;
		height: 366rpx;
		margin: 48rpx 0 32rpx;
	}

	.prop_box_content_num {
		font-size: 48rpx;
		color: #222222;
	}

	.prop_box_content_active {
		animation: domainactive 0.5s forwards ease-in-out;
	}

	@keyframes domainactive {
		0% {
			bottom: -999rpx;
		}

		100% {
			bottom: 0;
		}
	}
	/deep/ .uni-popup__info{
		color: #222222;
	}
	/deep/ .uni-dialog-content-text{
		color: #222222;
		font-size: 30rpx;
	}
</style>
